
<template>
	<div class="field-control">
		<SelectControl :transfer="true"
		               :initData="cacheData"
		               :optionKey="rangeset.key || 'id'"
		               :disabled="disabled"
		               :renderTpl="renderTpl"
		               :data="cacheData"
		               :postData="fetchData"
		               :path="fetchPath"
		               :option-key="model.rangeset?model.rangeset.key:'id'"
		               :option-code="model.rangeset?model.rangeset.name:'name'"
		               :initValue="value"
		               :rowData="rowData"
		               @selectChange="selectChange"
		               @input="selectInput($event)">
		</SelectControl>
		<div class="field-message"
		     v-show="!validate">{{message}}</div>
	</div>
</template>
<script>
import $ from '@/common';
$;
import base from './base';
import SelectControl from '@/components/x_selector';
/**
 * bug调试记录
 * 原本通过计算数据来设置初始输出initData
 * 由于使用了rowData中的数据，导致每次表单输入都会引发initData的重新计算导致过多的调用引发内存泄露
 * 通过使用watch，单独监听当前value
 * 重构中需要注意区分初始值和动态值的计算，以减少性能的开销
 *
 */
export default {
	extends: base,
	data() {
		return {
			mapping: null,
			cacheData: [],
		};
	},
	computed: {
		renderTpl() {
			if (this.rangeset) {
				return this.rangeset.tpl_list || this.rangeset.tpl_res;
			} else {
				return null;
			}
		},
		fetchPath() {
			if (this.rangeset) {
				if (this.rangeset.path) {
					return this.rangeset.path;
				} else if (this.rangeset.dataset || this.rangeset.code) {
					return `/service/{app}/dataset/data/${this.rangeset.dataset || this.rangeset.code}`;
				}
			}
		},
		fetchData() {
			var data = {};
			var param = {
				...this.rowData,
				app: window.App,
				app_code: window.App,
			};
			param.parent = this.parentData || {};
			for (let i in this.fetchDataset) {
				data[i] = $.composeValue(this.fetchDataset[i], param);
			}
			return data;
		},
		fetchDataset() {
			if (this.mapping) {
				return $.parseStringEq(this.mapping);
			} else {
				return {};
			}
		},
		rangeset() {
			var rangeset = this.model.rangeset || {};
			if (rangeset && typeof rangeset === 'string') {
				try {
					rangeset = JSON.parse(rangeset);
				} catch (ex) {
					rangeset = {
						code: rangeset,
					};
				}
			}
			return rangeset;
		},
	},
	watch: {
		value() {
			this.updateCacheData();
		},
	},
	methods: {
		updateCacheData() {
			var data;
			if (this.rowData && this.rowData[this.model.code] && this.rangeset) {
        var renderValue = this.initRenderValue();


        // garbage code start
        if (window.display_daledianhuaxianshimorenzhi_data && window.display_daledianhuaxianshimorenzhi_data[this.rowData[this.model.code]]) {
          renderValue = window.display_daledianhuaxianshimorenzhi_data[this.rowData[this.model.code]];
          window.display_daledianhuaxianshimorenzhi_data[this.rowData[this.model.code]] = null;
        }
        // garbage code end
        //

				data = [
					{
						[this.rangeset.key || 'id']: this.rowData[this.model.code],
						id: this.rowData[this.model.code],
						name: renderValue,
						// _name为初始化时标示的特殊渲染字段，在select中会优先显示_name然后在考虑进行renderTpl渲染
						_name: renderValue,
					},
				];
			} else {
				data = [];
			}
			this.$set(this, 'cacheData', data);
		},
		selectInput(v) {
			this.$emit('input', v);
		},
		selectChange(v) {
			if (!this.searchMode) {
				this.$emit('extInput', {
					code: this.model.code + '_name',
					value: v && v.name,
				});
			}
			if (this.rangeset.mapping) {
				for (let i in this.rangeset.mapping) {
					this.$emit('extInput', {
						code: i,
						value: v && v[this.rangeset.mapping[i]],
					});
				}
			}
		},
		initRenderValue() {
			var name = '';
			if (this.model.tpl) {
				name = $.composeValue(this.model.tpl, this.rowData);
			} else {
				name = this.rowData[this.model.code + '_name'] || this.rowData[this.model.code];
			}
			if (!name || !name.length) {
				return this.value;
			}
			return name;
		},
	},
	created() {
		if (this.model && this.model.param && this.model.param.mapping) {
			this.mapping = this.model.param.mapping;
		}
		this.updateCacheData();
	},
	components: {
		SelectControl,
	},
};
</script>
<style lang="less">

</style>
